<template>
  <div class="container vh100 flc" :style="{ paddingTop: `45px` }">
    <NavBar 
      :isShowBack="false"
      :navBarStyle="{
        backgroundColor: navBarBg,
        height: `45px`
      }"
      pageName="运营数据"
      @onLeftClick="leftBack" 
    />
    <div class="bg_fff fls">
      <van-tabs v-model="activeTab" @change="tabChange">
        <van-tab v-for="tab in tabList" :key="tab.id" :title="tab.name" :name="tab.id"></van-tab>
      </van-tabs>
    </div>
    <div class="fl1 pad_16 flau">
      <IncomeData v-if="activeTab == 1" :scriptList="scriptList"></IncomeData>
      <FormatData v-if="activeTab == 2" :scriptList="scriptList"></FormatData>
      <ActivateData v-if="activeTab == 3" :scriptList="scriptList"></ActivateData>
      <AreaData v-if="activeTab == 4" :scriptList="scriptList"></AreaData>
    </div>
  </div>
</template>

<script>
import NavBar from '@/components/NavBar/NavBar.vue'
import { navOtherHeight } from '@/config/config'
import {
  Tab, Tabs 
} from 'vant';
import IncomeData from './page/IncomeData.vue'
import FormatData from './page/FormatData.vue'
import ActivateData from './page/ActivateData.vue'
import AreaData from './page/AreaData.vue'
import { getScriptList } from '@/api/chart.js'

export default {
  components: {
    NavBar,
    IncomeData,
    FormatData,
    ActivateData,
    AreaData,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
  },

  data() {
    return {
      navBarBg: '#fff',
      navigationHeight: 47,
      statusBarHeight: 0,
      navOtherHeight,
      activeTab: '',
      tabList: [
        {
          id: 1,
          name: '收入数据'
        },
        {
          id: 2,
          name: '开本数据'
        },
        {
          id: 3,
          name: '激活数据'
        },
        {
          id: 4,
          name: '区域统计'
        },
      ],
      scriptList: []
    };
  },

  watch: {
    "$store.state.token": {
      handler:function() { 
        this.getScriptList()
      }
    }
  },

  created() {
    this.getAPPNavHeight()
    this.queryURLParams()
    if (this.$store.state.token) {
      this.getScriptList()
    }
  },

  mounted() {
    window.onChangeTab = this.onChangeTab
  },

  methods: {
    leftBack () {
      console.log('点击了', window)
      if (window.androidJSBridge) {
        window.androidJSBridge.back()
      } else if (window.webkit) {
        console.log('ios')
        window.webkit.messageHandlers.back.postMessage({})
      }
    },

    queryURLParams () {
      const { activeTab } = this.$route.query
      if (activeTab) {
        this.activeTab = parseInt(activeTab)
      } else {
        this.activeTab = 1
        this.$router.replace({
          query: {
            activeTab: 1
          }
        })
      }
    },

    // 监听tab变更
    tabChange(){
      const { activeTab } = this.$route.query
      if (!activeTab || this.activeTab !== activeTab) {
        this.$router.replace({
          query: {
            activeTab: this.activeTab
          }
        })
      }
    },

    // 手动切换tab
    onChangeTab(val) {
      console.log('切换tab', val)
      if (this.activeTab != val) {
        this.activeTab = val
        this.$router.replace({
          query: {
            activeTab: val
          }
        })
      }
    },

    getAPPNavHeight () {
      console.log('--appNavigation--', window)
      if (window.androidJSBridge) {
        const result = JSON.parse(window.androidJSBridge.appNavigation())
        this.navigationHeight = result.navigationHeight
        this.statusBarHeight = result.statusBarHeight
        console.log('android1', result)
      } else if (window.webkit) {
        console.log('ios-appNavigation')
        window.appNavigation = this.onAppNavigation
        window.webkit.messageHandlers.appNavigation.postMessage({})
      }
    },

    onAppNavigation (result) {
      console.log('ios--appNavigation', result)
      this.navigationHeight = Number(result.navigationHeight)
      this.statusBarHeight = Number(result.statusBarHeight)
    },

    // 获取剧本列表
    async getScriptList () {
      try {
        const params = {
          request: {
            dto: {}
          }
        }
        const res = await getScriptList(params)
        console.log('剧本列表', res)
        if (res.errorCode === 0) {
          this.scriptList = res.response.map(item => {
            return {
              text: item.title,
              value: item.id
            }
          })
          this.scriptList.unshift({
            text: '所有剧本',
            value: ''
          })
          // this.statisticsData = res.response
        }
      } catch (error) {
        console.error(error)
      }
    },
  }
};
</script>

<style lang="less">
.container {
  .van-tab__text--ellipsis {
    color: #8C8C8C;
    font-size: 14px;
  }
  .van-tabs__line {
    background-color: #131419;
    height: 2px;
  }
  .van-tab--active .van-tab__text--ellipsis {
    color: #131419;
    font-size: 16px;
    font-weight: 600;
  }
}

.van-pull-refresh {
  overflow: auto;
  height: 100%;
}

.wb49 {
  width: 48.5%;
  padding: 8px;
}
.mt_14 {
  margin-top: 6px;
}
.pad_10 {
  padding: 10px;
}
.pad_14 {
  padding: 14px;
}
.pad_5_10 {
  padding: 5px 10px;
}
.pad_5_16 {
  padding: 5px 16px;
}
.pad_10_16 {
  padding: 10px 16px;
}
.ptb_5 {
  padding: 5px 0;
}
.bkb_e7{
  border-bottom:1px solid #E7E7E7;
}
.bg_1 {
  background: linear-gradient(180deg, #EEFFC7 0%, rgba(255, 255, 255, 0.00) 100%);
}
.bg_2 {
  background: linear-gradient(180deg, #FFF6D5 0%, rgba(255, 255, 255, 0.00) 100%);
}
.bg_fa {
  background: #FAFAFA;
}
</style>
